<script lang='ts' setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { skuDelete } from '/@/api/commodity';
import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件
const router = useRouter();


const props = withDefaults(defineProps<{
    skuTableData: any
}>(), {
    skuTableData: () => ([])
})

// 商品sku或spu删除
const delFun = (type: string,id?: number) => {
	ElMessageBox.confirm(`此操作将永久删除该规格项，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning', 
	}).then( async() => {
        let res = await skuDelete(id);
        ElMessage.success('删除成功');
	}).catch(() => {});
}

// 商品新增或者编辑
const addCommodity = (value: string,id?: number) => {
	router.push({
		path: '/commodity/goodList/add',
		query: { status: value, id: id},
	});
}

</script>
<template>
    <section class="pl110" style="background-color:var(--next-bg-main-color);">
        <el-table ref="skuTableRef" :data="props.skuTableData"
            :header-cell-style="{ backgroundColor: '#f8f8f8',}"
            :cell-style="{ backgroundColor: '#f8f8f8',}"
            :row-style="{ backgroundColor: '#f8f8f8', }" >
            <el-table-column label="SKU" width="90">
                <template #default="scope">
                    <span> {{scope.row.skuId }} </span>
                </template>
            </el-table-column>
            <el-table-column label="图片" width="90">
                <template #default="scope">
                    <el-image  class="borderRadius5" style="width:32px; height: 32px;" :src="scope.row.skuImgUrl" fit="cover" />
                </template>
            </el-table-column>
            <!-- <el-table-column label="品牌" align="center">
                <template #default="scope">
                    <span>{{ scope.row.brand }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center">
                <template #default="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column> -->
            <el-table-column label="属性" align="center">
                <template #default="scope">
                    <span>{{ scope.row.skuTypeName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="规格" align="center">
                <template #default="scope">
                    <span>{{ scope.row.skuSerialName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="零售价" align="center">
                <template #default="scope">
                    <span>￥{{ scope.row.lowPrice }}元</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
                <template #default="scope">
                    <el-switch v-model="scope.row.onShelf" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button text type="primary" @click="delFun('sku',scope.row.skuId)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </section>
</template>

<style lang='scss' scoped>

</style>